<template>
    <div class="components-layout-left">
    <el-input class="search" placeholder="搜索组件" v-model="search" clearable @keyup.enter.native="search1"/>
    <el-collapse v-model="activeKey">
      <el-collapse-item title="基本形状" name="1" key="1">
        <ul class="svg-nav-list">
          <li><div class="title">矩形</div><img title="断路器" @mousedown="Mousedown('CircuitBreakerSvg','矩形','#00FF00',40,0,'',2)" src="../../assets/images/topo/CircuitBreakerSvg.png" draggable="true"></li>
          <li><div class="title">文字</div><img title="文字" @mousedown="Mousedown('TextSvg','文字','#FF0000',0,50,'文字')" src="../../assets/images/topo/TextSvg.png" draggable="true"></li>   
          <li><div class="title">表格</div><img title="表格" @mousedown="Mousedown('TableSvg','表格','#CCCC33')" src="../../assets/images/topo/TableSvg.png" draggable="true"></li>      
          <li><div class="title">竖线</div><img title="竖线" @mousedown="Mousedown('VerticalLineSvg','竖线','#FF0000',150,0,'',2)" src="../../assets/images/topo/VerticalLineSvg.png" draggable="true"></li>
          <li><div class="title">横线</div><img title="横线" @mousedown="Mousedown('HorizontalLineSvg','横线','#FF0000',150,0,'',2)" src="../../assets/images/topo/HorizontalLineSvg.png" draggable="true"></li>   
        </ul>
      </el-collapse-item>
      <el-collapse-item title="拓扑图" name="2" key="2">
        <ul class="svg-nav-list two-item">
          <li><div class="title">变电站</div><img title="变电站" @mousedown="Mousedown('SmartTerminalSvg','变电站','',300,0,'',0)" src="../../assets/images/topo/SmartTerminalSvg.png" draggable="true"></li>
        </ul>
      </el-collapse-item>
      <el-collapse-item title="动图" name="3" key="3">
        <ul class="svg-nav-list two-item">
        </ul>
      </el-collapse-item>
    </el-collapse>
    </div>
    </template>
    <script>
    import global from '@/global/global.js';//全局变量
    export default {
      data() {
        return {
          activeKey: ['1'],  //当前激活的key
          search: ''
        }
      },
      methods:{
        Mousedown(type,title,color,height,fontSize,text,width){
          global.CurrentlySelectedToolBarType=type;
          global.CurrentlySelectedToolBarTypeName=title;
          global.CurrentlySelectedToolBarTitle=title;
          global.CurrentlySelectedToolBarColor=color;
          global.CurrentlySelectedToolBarHeight=height;
          global.CurrentlySelectedToolBarFontSize=fontSize;
          global.CurrentlySelectedToolBarText=text;
          global.CurrentlySelectedToolBarWidth=width;
        },
        search1() {
          alert('搜索未实现')
        }
      }
    };
    </script>
    <style lang="scss" scoped>
    .components-layout-left {
      padding: 8px !important;
      .search {
        padding-bottom: 20px;
      }
      .svg-nav-list{
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        margin: 0;
        padding: 0;
      
        li{
          position: relative;
          width: calc(33.33% - 30px);
          height: 56px;
          margin: 0 15px 15px 15px; 
          padding: 0;
          border-radius: 50%;
          box-shadow: 1px 1px 5px #ddd;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          margin-top: 10px;
          &:hover{
            box-shadow: 1px 1px 5px #0090ff;
          }
      
          img{
            display: block;
            width: 100%;
          }
      
          .title{
            display: none;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,0.4);
            color: #fff;
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            text-align: center;
          }
        }
      
        
      
        &.two-item{
          li{
            width: calc(50% - 30px);
            height: 100px;
            margin-top: 10px;
            margin-bottom: 25px;
            border-radius: 10px;
      
            img{
              width: auto;
              height: 100%;
            }
          }
        }
      }
    }
    
    </style>